<template>
  <page-container>
    <el-form
      ref="form"
      :model="ruleForm"
      :rules="formRules"
      :disabled="loading"
      label-width="100px"
      inline
      @submit.prevent="handleSubmit"
    >
      <app-card>
        <template #header>
          文章信息
        </template>
        <el-form-item
          label="标题："
          prop="title"
        >
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="作者："
          prop="author"
        >
          <el-input
            v-model="ruleForm.author"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="文章分类："
          prop="cid"
        >
          <el-select
            v-model="ruleForm.cid"
            placeholder="请选择"
            clearable
            @change="initData"
          >
            <el-option
              v-for="itemType in listType"
              :key="itemType.id"
              :label="itemType.title"
              :value="itemType.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="文章简介："
          prop="synopsis"
        >
          <el-input
            v-model="ruleForm.synopsis"
            type="textarea"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="图文封面："
          prop="image_input"
        >
          <el-upload
            class="avatar-uploader"
            action="xxx"
            :http-request="handleUpload"
            :show-file-list="false"
          >
            <img
              v-if="ruleForm.image_input"
              :src="ruleForm.image_input"
              class="avatar"
            >
            <el-icon
              v-else
              class="avatar-uploader-icon"
            >
              <plus />
            </el-icon>
          </el-upload>
          <el-input
            v-model="ruleForm.image_input"
            style="display: none;"
          />
        </el-form-item>
      </app-card>
      <app-card>
        <template #header>
          文章内容
        </template>
        <el-form-item
          label="文章内容："
          prop="content"
        >
          <app-text-editor v-model="ruleForm.content" />
        </el-form-item>
      </app-card>
      <app-card>
        <template #header>
          其他设置
        </template>
        <el-form-item label="banner显示：">
          <el-radio-group v-model="ruleForm.is_banner">
            <el-radio
              v-for="item in isShowConfig"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="热门文章：">
          <el-radio-group v-model="ruleForm.is_hot">
            <el-radio
              v-for="item in isShowConfig"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSubmit"
          >
            提交
          </el-button>
        </el-form-item>
      </app-card>
    </el-form>
  </page-container>
</template>

<script lang="tsx" setup>
import { Plus } from '@element-plus/icons'
import { ArticleCategory, ArticleCategoryParams, ArticleForm } from '@/api/types/article'
import { onMounted, ref } from 'vue'
import * as api from '@/api/article'
// import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { uploadFile } from '@/api/file'
import { IElForm, IFormRule } from '@/types/element-plus'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const isShowConfig = ref([
  { label: '显示', value: 1 },
  { label: '不显示', value: 0 }
])
const form = ref<IElForm | null>(null)
const ruleForm = ref<ArticleForm>({
  id: 0,
  cid: '',
  title: '',
  author: '',
  image_input: '',
  content: '',
  synopsis: '',
  is_banner: 0,
  is_hot: 0,
  visit: 0
})
const formRules: IFormRule = {
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' }
  ],
  author: [
    { required: true, message: '请输入作者', trigger: 'blur' }
  ],
  cid: [
    { required: true, message: '请选择文章分类', trigger: 'change' }
  ],
  synopsis: [
    { required: true, message: '请输入文章简介', trigger: 'blur' }
  ],
  image_input: [
    { required: true, message: '请上传图文封面', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入文章内容', trigger: 'blur' }
  ]
}
const listType = ref<ArticleCategory[]>([])
const loading = ref(false)

onMounted(() => {
  initType()
  initData()
})

const initType = async () => {
  const params: ArticleCategoryParams = {
    type: 1
  }
  const data = await api
    .getArticleCategory(params)
  listType.value = data
}

const initData = async () => {
  const { id } = route.params
  if (id) {
    const data = await api
      .getArticleDetail(Number(id))
    const { info } = data
    ruleForm.value = {
      ...ruleForm.value,
      id: info.id,
      cid: info.cid,
      title: info.title,
      author: info.author,
      image_input: info.image_input[0],
      content: info.content,
      synopsis: info.synopsis,
      is_banner: info.is_banner,
      is_hot: info.is_hot,
      visit: info.visit
    }
  }
}

const handleUpload = async ({ file }: { file: File }) => {
  const data = await uploadFile({
    pid: 0,
    file
  })
  ruleForm.value.image_input = `https://shop.fed.lagou.com${data.src}`
}

const handleSubmit = async () => {
  const valid = await form.value?.validate()
  if (!valid) return false
  await api.postArticle(ruleForm.value)
  ElMessage.success('保存成功')
  router.push({
    name: 'article'
  })
}

</script>

<style lang="scss" scoped>
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
:deep(.avatar-uploader .el-upload:hover) {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 55px;
  height: 55px;
  text-align: center;
}
:deep(.avatar-uploader-icon svg) {
  margin-top: 14px; /* (178px - 28px) / 2 - 1px */
}
.avatar {
  width: 55px;
  height: 55px;
  display: block;
}
</style>
